<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>jsx语法规则</title>
		<style>
			.demo{
				background-color: orange;
				border: red 3px solid;
			}
		</style>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.development.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.development.js"></script>
		<!-- 引入babel，用户解析jsx为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>
	<body>
		<!-- 准备好容器 -->
		<div id="test"></div>
		
		<script type="text/babel">
			/* 
					jsx语法规则：
							1.定义虚拟DOM时，不要写引号。
							2.标签结构中要混入js表达式，要用{}做分割，即：{js表达式}
							3.指定样式的类名不要用class，必须用className
							4.行内样式，要用style={{}}的形式去编写，且像font-size这种属性，要转为fontSize
							5.只能有一个根标签（临时的解决办法：在最外侧包裹一个div，后面的课程中会有更好的解决办法）
							6.标签必须闭合
							7.标签首字母:
									(1).若标签首字母小写：则将该标签转为html中同名元素，若html中无该元素，则报错。
									(2).若标签首字母大写：则react去渲染对应的组件，若没有定义过该组件，则报错。
			*/
			const myId = 'aTgUiGu'
			const myData = 'hELlO,REacT'

			//1.创建虚拟DOM
			const VDOM = (
				<div>
					<div id={myId.toLowerCase()} className="demo">
						<h1 style={{color:'gray',fontSize:'50px'}}>{myData.toUpperCase()}</h1>
					</div>
					<span>终于要线下上课，奔现了，很开心！！</span>
					<input type="text"/>
				</div>
			)

			//2.解析虚拟DOM为真实DOM，渲染到页面
			ReactDOM.render(VDOM,document.getElementById('test'))
		</script>
	</body>
</html>